import {defineComponent, PropType, CSSProperties, VNode} from "vue";
import "./index.scss"; // 组件专属样式文件（可选）
import zwsj from "@/assets/images/zwsj.png";

// 定义表头列的类型接口
interface TableColumn {
    title: string; // 表头显示文本（如“名称”“规格”）
    dataIndex: string; // 对应数据对象的字段名
    width?: string | number; // 列宽（可选，如“120px”“20%”）
    align?: "left" | "center" | "right"; // 列内容对齐方式（可选，默认left）
    textalign?: "left" | "center" | "right";
    cellStyle?: CSSProperties; // 单元格自定义样式（可选）
    headerStyle?: CSSProperties; // 表头单元格自定义样式（可选）
    // 新增：自定义单元格渲染函数，参数为当前行数据和行索引
    render?: (record: any) => JSX.Element; // 自定义渲染函数
}

// 定义表格数据的通用类型（泛型，支持任意结构的数据）
type TableRecord = Record<string, any>;

export default defineComponent({

    props: {
        /** 表头配置（必传） */
        columns: {
            type: Array as PropType<TableColumn[]>,
            required: true,
        },

        /** 表格数据（必传） */
        data: {
            type: Array as PropType<TableRecord[]>,
            required: true,
            default: () => [], // 默认空数组
        },

        /** 表格整体样式 */
        tableStyle: {
            type: Object as PropType<CSSProperties>,
            default: () => {},
        },

        /** 表格容器样式（用于控制外层容器） */
        containerStyle: {
            type: Object as PropType<CSSProperties>,
            default: () => {},
        },
    },

    setup(props) {
        return () => (
            // 表格外层容器（可控制整体宽高、边距等）
            <div style={props.containerStyle}>
                {/* 表格主体 */}
                <table style={props.tableStyle} class="common-table">
                    {/* 表头 */}
                    <thead class="common-table__header">
                        <tr>
                            {props.columns.map((column, index) => (
                                // 遍历columns渲染表头单元格
                                <th
                                    key={index} // 若columns有唯一key，可替换为column.key（推荐）
                                    style={{
                                        width: column?.width,
                                        textAlign: column?.align || "left",
                                        ...column.headerStyle, // 合并自定义表头样式
                                    }}
                                >
                                    {column.title}
                                </th>
                            ))}
                        </tr>
                    </thead>

                    {/* 表体（数据行） */}
                    <tbody class="common-table__body">
                    {/* 若数据为空，显示空状态（可选，也可由父组件控制） */}
                    {props.data.length === 0 ? (
                        <tr>
                            <td
                                colspan={props.columns.length} // 跨所有列
                                style={{
                                    textAlign: "center",
                                    padding: "20px",
                                    color: "#999",
                                }}
                            >
                                    <div style={{marginTop:'-5%'}}>
                                        <img src={zwsj} style={{width:'100%',height:'100%'}}/>
                                    </div>
                            </td>
                        </tr>
                    ) : (
                        // 遍历data渲染数据行
                        props.data.map((record, rowIndex) => (
                            <tr
                                key={rowIndex} // 若数据有唯一ID（如FYFL_ID），推荐替换为record.FYFL_ID
                                // class={rowIndex % 2 === 0 ? "common-table__row--even" : ""} // 奇偶行样式（可选）
                            >
                                {/* 遍历columns，根据dataIndex匹配当前行的字段值 */}
                                {props.columns.map((column, colIndex) => (
                                    <td
                                        key={colIndex}
                                        style={{
                                            textAlign: column?.textalign || "left",
                                            ...column.cellStyle, // 合并自定义单元格样式
                                        }}
                                    >

                                        {/* 优先使用自定义渲染函数，否则使用dataIndex匹配值 */}
                                        {column.render ? column.render(record) : record[column.dataIndex!] ?? ""}
                                    </td>
                                ))}
                            </tr>
                        ))
                    )}
                    </tbody>
                </table>
            </div>
        );
    },
});
